.feature-modules {
  padding: 2rem;

  .modules-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;

    .module-card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: none; 

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
      }

      .card-icon {
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        color: white;
        padding: 1.5rem;
        text-align: center;
        font-size: 2rem; 

        .anticon { 
          font-size: 2rem;
        }
      }

      .card-content {
        padding: 1.5rem;

        .card-title.ant-typography {
          color: #1e293b;
          font-size: 1.25rem;
          font-weight: 600;
          margin: 0 0 1rem 0;
        }

        .card-description.ant-typography {
          color: #64748b;
          font-size: 0.95rem;
          line-height: 1.5;
          margin-bottom: 1rem;
        }

        ul {
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem 0;
            color: #4b5563;
            font-size: 0.95rem;

            .anticon {
              color: #6366f1;
              font-size: 1rem;
            }
          }
        }
      }
    }
  }

  /* 性能优化部分样式 */
  .performance-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1.5rem;

    .performance-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;

      .performance-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        padding: 1.25rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: none; 

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .card-icon {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          font-size: 1.25rem; 

          .anticon {
            font-size: 1.25rem;
          }
        }

        .card-content {
          padding: 0; 

          .performance-card-title.ant-typography {
            color: #1e293b;
            font-size: 1rem;
            font-weight: 600;
            margin: 0 0 0.5rem 0;
          }

          .performance-card-description.ant-typography {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.4;
            margin: 0;
          }
        }
      }
    }
  }
}

@media (max-width: 1280px) {
  .feature-modules {
    .modules-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (max-width: 768px) {
  .feature-modules {
    padding: 1rem;

    .modules-grid {
      grid-template-columns: 1fr;
    }

    .performance-cards {
      grid-template-columns: 1fr;
    }
  }
}